import React, { CSSProperties, ReactNode } from 'react';

type WdtProps = {
  children: ReactNode,
  visible:boolean,
  title?:string,
  left?:string,
  right?:string,
  top?:string,
  bottom?:string,
  closeClick():void
};
const WidgetContainer = (props:WdtProps):JSX.Element => {
  const {
    visible, children, closeClick, title, left, right, top, bottom,
  } = props;

  const style:CSSProperties = {
    display: visible === false ? 'none' : 'block',
    position: 'absolute',
    zIndex: 1,
    minWidth: '150px',
    left,
    right,
    top,
    bottom,
  };
  return (
    <>
      <div
        className="ant-modal-content"
        style={style}
      >
        <button type="button" aria-label="Close" className="ant-modal-close" onClick={closeClick}>
          <span className="ant-modal-close-x">
            <i aria-label="icon: close" className="anticon">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
              </svg>
            </i>
          </span>
        </button>
        <div className="ant-modal-header">
          <div className="ant-modal-title" id="rcDialogTitle1">{title}</div>
        </div>
        <div className="ant-modal-body">
          {Array.isArray(children)
            ? children.map((child) => child) : children && children}
        </div>
      </div>
    </>
  );
};

WidgetContainer.defaultProps = {
  title: '模块',
  left: 'auto',
  right: '20px',
  top: '20px',
  bottom: 'auto',
};

export default WidgetContainer;
